<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>
		<view v-for="(list,key) in modData" :class="list.mod_class" :key="key" :style="list.css">
			<moxi-index v-if="list.name=='plugin_bcard_mycard'" :list="list" >
				<view class="plugin-bcard-box" :style="{height:list.set.height+'rpx',
				'flex-direction':list.set.ps,
				background:list.set.bg.length?'url('+list.set.bg+')':'',
				color:list.set.color
				}" v-if="info.id">
		            <view style="width: 53%;display: flex;flex-direction: column;text-align: center;justify-content: space-between">
		                <view style="display: flex;flex-direction: column;margin-top: 10px;">
		                    <view style="width: 90%;display: flex;flex-direction: column">
		                        <span style="font-family: '黑体';font-size: 20px;font-weight: 600;">{{info.name}}</span>
		                    </view>
		                    <view class="hr-" :style="'background:'+list.set.hr1">
		                        <view :style="'width: 70%;height: 6px;background: '+app_color+';margin: -2px auto 0 auto;border-radius: 15px;'"></view>
		                    </view>
		                    <view style="width: 90%;font-family: 黑体;font-size: 13px;font-weight: 600;">{{info.position}}</view>
		                </view>
		                <view style="display: flex;text-align: left;flex-direction: column">
		                    <view class="tel-info">
								<view class="info-left">电话 :</view>
								<text class="u-line-2">
									{{info.phone}}
								</text>
							</view>
		                    <view class="tel-info">
								<view class="info-left">邮箱 :</view>
								<text class="u-line-2">{{info.email}}</text>
							</view>
		                    <view class="tel-info">
								<view class="info-left">地址 :</view>
								<text class="u-line-2">{{info.address.address}}</text>
							</view>
		                </view>
		            </view>
					<view class="box-img" 
					:style="list.set.xh == 1?'-webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);mask-image: linear-gradient(to bottom, black 75%, transparent 100%);':''">
						<img :src="info.pic"
						 alt="" style="max-width: 100%;max-height:100%;border-radius: 4px;">
					</view>
		        </view>
			</moxi-index>
			<moxi-index v-else-if="list.name=='plugin_bcard_bottom_btn'" :list="list" >
				<view class="plugin_bcard_bottom_btn">
					<view class="plugin_bcard_bottom_btn_top" style="">
						<view class="bottom-btn" v-if="list.set.share_btn==1" style="position: relative;">
							<u-icon name="share" size="21"></u-icon>
							<text>分享</text>
							<button class="btn"  open-type="share"
								style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity:0;z-index: 2;">
							</button>
						</view>
						<view class="bottom-btn" v-if="list.set.index_btn==1" @click="navto('pages/index/index')">
							<u-icon name="home" size="21"></u-icon>
							<text>首页</text>
						</view>
						<view class="bottom-btn" v-if="list.set.call_btn==1" @click="call()">
							<u-icon name="phone" size="21"></u-icon>
							<text>联系Ta</text>
						</view>
						<view class="bottom-btn" v-if="list.set.daohang_btn==1" @click="map()">
							<u-icon name="map" size="21"></u-icon>
							<text>导航</text>
						</view>
					</view>
					<view style="display: flex;flex-direction: column;width: 100%;
					justify-content: center;margin-right: 10px;">
						<u-button :color="app_color" shape="circle" @click="tx()">保存到通讯录</u-button>
					</view>
				</view>
				<template v-if="info.uid&&userinfo.id&&info.uid==userinfo.id"></template>
				<view style="height: 50px;width: 100%;" v-else></view>
			</moxi-index>
			<moxi-index v-else-if="list.name=='plugin_bcard_btn'" :list="list" >
				<view id="mingpian_info" >
					<!-- #ifdef MP-WEIXIN -->
					<view class="info-list-tab" @click="getcode()" v-if="list.set.code_btn==1">
						<u-icon name="grid" size="32" :color="app_color"></u-icon>
						<text class="info-name" :style="'color: '+list.set.font_color">名片码</text>
					</view>
					<!-- #endif -->
					<view class="info-list-tab" style="position: relative;" v-if="list.set.share_btn==1">
						<u-icon name="share" size="32" :color="app_color"></u-icon>
						<text class="info-name" :style="'color: '+list.set.font_color">转发Ta</text>
						<button class="btn"  open-type="share" 
							style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity:0;z-index: 2;">
						</button>
					</view>
					<view class="info-list-tab" @click="call()" v-if="list.set.call_btn==1">
						<u-icon name="phone" size="32" :color="app_color"></u-icon>
						<text class="info-name" :style="'color: '+list.set.font_color">打电话</text>
					</view>
					<view class="info-list-tab" @click="paste(info.wx)" v-if="list.set.weixin_btn==1">
						<u-icon name="chat" size="32" :color="app_color"></u-icon>
						<text class="info-name" :style="'color: '+list.set.font_color">加微信</text>
					</view>
					<view class="info-list-tab" @click="map()" v-if="list.set.daohang_btn==1">
						<u-icon name="map" size="32" :color="app_color"></u-icon>
						<text class="info-name" :style="'color: '+list.set.font_color">查导航</text>
					</view>
				</view>
	
			</moxi-index>
			<moxi-index v-else-if="list.name=='plugin_bcard_desc'" :list="list">
						<view v-if="info.desc&&info.desc.length"
							:style="'white-space: pre-wrap;word-wrap: break-word;font-size: 14px; '">
							<u-parse :content="info.desc"></u-parse>
						</view>
			</moxi-index>
			<moxi-index v-else-if="list.name=='plugin_bcard_dc'" :list="list">
						<view v-if="info.dc&&info.dc.length"
							:style="'white-space: pre-wrap;word-wrap: break-word;font-size: 14px; '">
							<u-parse :content="info.dc"></u-parse>
						</view>
			</moxi-index>
			<moxi-index v-else-if="list.name=='plugin_bcard_video'" :list="list">
				<video controls  class="video_list"
				 object-fit="fill"
				 :style="{height:list.set.height}"
					:autoplay="list.set.auto?true:false" :src="info.video" v-if="info.video&&info.video.length"></video>
			
			</moxi-index>
			<moxi-index v-else :list="list"></moxi-index>
			
			
		</view>
		
<view v-if="info.uid&&userinfo.id&&info.uid==userinfo.id" style="display: flex;flex-direction: row;justify-content: space-between;margin:10px;margin-bottom: 55px;">
	
				<view style="width: 48%;">
					<u-button @click="edit= true"class="btn" :plain="true"
						text="编辑名片"  :color="app_color"></u-button>
				</view>
				<view style="width: 48%;">
				<u-button @click="blog()" class="btn" text="访问记录" 
					:color="app_color"></u-button>
					</view>
			</view>
			
		<u-popup :show="edit" @close="edit = !edit" round="10">
			<view style="height: 70vh;overflow: auto;padding: 10px;">
				<view class="text_title">姓名：</view>
				<u--input placeholder="请输入您的姓名" border="surround" v-model="info.name"></u--input>
				<view class="text_title">电话：</view>
				<u--input placeholder="请输入您的手机号码" border="surround" v-model="info.phone"></u--input>
				<view class="text_title">微信：</view>
				<u--input placeholder="请输入您的微信号" border="surround" v-model="info.wx"></u--input>
				<view class="text_title">邮箱：</view>
				<u--input placeholder="请输入您的邮箱地址" border="surround" v-model="info.email"></u--input>
				<view class="text_title">简介：</view>
				<u--textarea v-model="info.desc" placeholder="请自我介绍下吧" autoHeight></u--textarea>
				<view class="text_title">封面图：</view>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"
					multiple :previewFullImage="true"></u-upload>
				<view class="video_title">上传视频：</view>
				<u-upload :fileList="fileList2" @afterRead="afterRead2" @delete="deletePic2" name="2" multiple
					:maxCount="1" accept="video"></u-upload>
				<u-button text="保存设置" @click="save()" type="primary"></u-button>
			 </view>
		</u-popup> 

		<u-popup :show="logBox" @close="logBox = !logBox" round="10">
			<view style="height: 70vh;overflow: auto;padding: 10px;display: flex;flex-direction: column;">
				<u-list @scrolltolower="scrolltolower">
					<view v-for="l in log" class="visitorLog">
						<image :src="l.user.pic" mode="aspectFill" style="width: 60px;height: 60px;border-radius: 4px;">
						</image>
						<view
							style="margin-left: 10px;display: flex;flex-direction: column;justify-content: space-between;position: relative;">
							<view style="display: flex;flex-direction: row;justify-content:space-between">
								<text v-if="l.user.showname">{{l.user.showname}}</text>
								<text v-else>{{l.user.username}}</text>
								<text :style="'margin-left: 10px;font-size: 12px;color:'+app_color " v-if="l.user.phone">{{l.user.phone}}</text>
							</view>
							
							<text style="font-size: 13px;;">浏览时间：
								<text style="display: inline-block;">{{l.time | date('yyyy年mm月dd日')}}</text>
							</text>
						</view>
					</view>
				</u-list>
			</view> 
		</u-popup>
		<u-overlay :show="showCode" @click="showCode = false">
			<view v-if="info.id" style="width: 100%;height: 100%;display: flex;
		flex-direction: column;justify-content: center;text-align: center;align-items: center;">
				<view
					style="width: 600rpx;height: 66%;border-radius: 4px;
			background: linear-gradient(to top,#55aaff,#69c3ff);display: flex;flex-direction: column;justify-content: space-between;">
					<view style="display: flex;flex-direction: column;">
						<text style="color: #fff;margin: 5px 0;font-size: 18px;margin-top: 15px;">{{info.name}}</text>
						<text style="color: #e8e8e8;font-size: 12px;">{{info.position}}</text>
					</view>
					<view style="display: flex;flex-direction: column;text-align: center;align-items: center;">
						<img style="max-width: 400rpx;height: 400rpx; border-radius: 10px;object-fit: cover;"
							:src="mp_code" alt="">
						<text style="color: #fff;margin-top: 5px;font-size: 14px;;">扫码进入我的名片</text>
					</view>
					<view
						style="align-items: center;text-align: center;display: flex;flex-direction: column;margin-bottom: 20px;">
						<view style="width: 80%;">
							<u-button type="primary" icon="share" open-type="share" shape="circle"
								text="分享名片"></u-button>
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showCode: false,
				info: {},
				mp_code: "",
				edit: false,
				fileList1: [],
				fileList2: [],
				logBox: false,
				log: [],
				hasMore: true,
				pageInfo: {
					page: 1,
					page_num: 7,
					data: [],
				},
			}
		},
		created() {



		},
		mounted() {
	
		let self = this;
			if (this.param.id) {
				
				this.moxiPost('/plugin/bcard/index/card/info', {
					id: this.param.id,
				}, function(data) {
					self.info = data.data;
					self.fileList1.push({
						url: self.info.pic
					})
					uni.setNavigationBarTitle({
						title: data.data.name + '，的名片-'+ data.data.qiye
					});
				})
			} else {
				console.log('缺少ID参数');
			}

		},
		methods: {
			// 触底加载新内容
			scrolltolower() {
				if (this.hasMore) {
					this.pageInfo.page++;
					this.blog();
				}
			},
			// 获取内容
			blog() {
				let self = this;
				this.moxiPost('/plugin/bcard/user/bcard/log', this.pageInfo, function(data) {
					if (data.data.allpage <= self.pageInfo.page) {
						self.hasMore = false;
					}
					self.logBox = true;
					for (let k in data.data.data) {
						self.log.push(data.data.data[k])
					}
				})
			},
			save() {
				let self = this;
				this.moxiPost('/plugin/bcard/user/bcard/edit', this.info, function(data) {
					self.edit = false
					self.msg('保存成功')
				})
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					this.info.pic = result;
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// 新增视频
			async afterRead2(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					this.info.video = result;
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					this.moxiUpload(url, function(data) {
						resolve(data)
					})
				})
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			deletePic2(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			tx() {
				// #ifdef H5
				uni.makePhoneCall({
					phoneNumber: this.info.tel //直接拨号
				});
				// #endif
				// #ifndef H5
				uni.addPhoneContact({
					nickName: this.info.name,
					organization: this.info.qiye,
					firstName: this.info.name,
					title: this.info.position,
					hostNumber: this.info.tel,
					remark: '名片自动导入',
					mobilePhoneNumber: this.info.phone,
					weChatNumber: this.info.ex,
					email: this.info.email,
					success: function() {
						this.msg('添加联系人成功')
					},
					fail: function() {
						console.log('fail');
					}
				});
				// #endif
			},
			map() {
				if (this.info.address && this.info.address.center && this.info.address.center[1]) {
					uni.openLocation({
						latitude: this.info.address.center[1],
						longitude: this.info.address.center[0],
						name:"公司位置",
						address:this.info.address.address,
						success: function() {
							
						}
					});
				} else {
					this.msg('未设置地图坐标')
				}

			},
			paste(value) {
				uni.setClipboardData({
					data: value
				});
				this.msg('已复制微信号')
			},
			call() {
				if(this.info.phone==0||this.info.phone==''){
					uni.makePhoneCall({
						phoneNumber: String(this.info.tel)
					});
					console.log(this.info.tel);
				}else{
					uni.makePhoneCall({
						phoneNumber: String(this.info.phone)
					});
					String(this.info.phone)
				}
				
			},
			getcode() { //微信小程序获取二维码
				let self = this;
				const page = this.get_cur_page();

				this.moxiPost('/index/app/mp_code', {
					page: page
				}, function(data) {
					self.showCode = true;
					self.mp_code = data.data;
				
				})
			},
			color(v) {
				return uni.$u.colorToRgba(v, 0.7);
			}
		}
	}
</script>

<style lang="scss">
	::v-deep .u-list {
		height: 100% !important;
	}
	.hr-{width: 90%;text-align: center;height: 2px;margin: 6px 0}
	.box-img{width: 40%;max-height:100%;text-align: right;}
	.tel-info{display: flex;flex-direction: row;font-size: 12px;margin: 2px 0;}
	.info-left{width: 40px;flex-shrink:0}
	.tel-info text{flex-wrap: nowrap;}
.plugin-bcard-box{
    display: flex;flex-direction: row-reverse;justify-content: space-between;padding: 12px;
}
.plugin_bcard_bottom_btn{
	width: 100%;height: 50px;background-color: #fff;position: fixed;bottom: 0;box-shadow: 0 0 8px #ccc;
	left: 0;z-index: 3;display: flex;flex-direction: row;justify-content: space-between;
	
	.plugin_bcard_bottom_btn_top{
		display: flex;flex-direction: row;text-align: center;
		justify-content: space-around;flex-shrink: 0;
	}
	.bottom-btn{
		display: flex;flex-direction: column;text-align: center;height: 42px;
		justify-content: center;padding:3px 13px 0 13px;align-items: center;
		
	}
	.bottom-btn text{font-size: 12px;margin-top: 2px;}
}

.video_list{width: 100%;}
	.visitorLog {
		display: flex;
		flex-direction: row;
		padding: 16px 10px;
		border-bottom: 1px solid #eee;
		border-radius: 5px;

		&:nth-last-child(1) {
			border: none;
		}
	}

	.btn-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 10px;
	}

	#mingpian_info {
		display: flex;
		margin: 10px;
		flex-direction: row;
		justify-content: space-around;
	}


	.info-list-tab {
		display: flex;
		flex-direction: column;
		text-align: center;
		justify-content: center;
		align-items: center;
	}

	.info-name {
		font-size: 14px;
		color: #222
	}

	.zhiwei {
		margin-left: 8px;
		font-size: 13px;
		color: #666;
		margin-top: 12px;
	}

	.qiye {
		font-weight: 500;
		color: #333;
	}

	.name {
		display: flex;
		flex-direction: row;
	}

	.name h2 {
		font-size: 24px;
	}

	.mingpian {
		display: flex;
		flex-direction: row;
		min-height: 360rpx;
		position: relative;
		justify-content: space-between;
	}

	.user_pic {
		max-width: 70px;
		max-height: 70px;
		border-radius: 100px;
		object-fit: cover;
		border: 3px #fff solid;
	}

	.con-1 {
		width: 30%;
		justify-content: center;
		text-align: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.con-2 {
		white-space: break-spaces;
		width: 70%;
		padding: 10px;
		justify-content: space-between;
		word-wrap: break-word;
		display: flex;
		flex-direction: column;
	}

	.info {
		display: flex;
		flex-direction: column;
	}

	.info .info-list {
		display: flex;
		flex-direction: row;
		margin: 2px 0;
	}

	.info .info-con {
		margin-left: 5px;
		font-size: 14px;
	}

	.text_title {
		color: #666;
		margin: 10px 0;
		font-size: 14px;
		margin-bottom: 6px;
	}
</style>